body{
}

div{
    width: 300px;
    height: 60px;
    margin: auto;
    border-radius: 8px;
}

.test{
    background-color: grey;
    transition: width 2s, background-color 2s,padding 2s, color 2s;
    transition-time-function:cubic-bezier(0.6,1,0.15,0.8);
    transition-delay: 0.4s;
}
.test:hover{
    width: 550px;
    /*padding: 10px;*/
    color:blue;
    background-color: gold;
}

/*@keyframes 'expend' {
    0%{border: 30px solid #ff0000}
    50%{border: 1px solid #ff0000}
    100%{
        border: 1px solid #ff0000
    }
}*/

.animation{
    background-color: grey;
    animation-name: expend;
    -webkit-animation-name: expend;
    animation-duration: 2s;
    -webkit-animation-duration: 2s;
}

.wrap {
    width: 500px;
    height: 300px;
    margin: 30px auto;
    position: relative;
    background: url(lib/landscape.png) no-repeat center center;
    background-size: 100% 100%;
    overflow: hidden;
}
/*设置动画*/
@keyframes spin{
    0%{
        transform:rotateY(0deg)
    }
    100%{
        transform:rotateY(360deg)
    }
}

.d3{
    transform-style: preserve-3d;
    border: 1px solid green;
    /*transform: rotateX(-60deg);*/
    transform: perspective(200px) rotateY(30deg)  rotateX(30deg);
    perspective-origin : 200px;
    backface-visibility: hidden;
    /*transform: rotateZ(20deg);*/
    /*transform: perspective(200px) rotateY(45deg);*/
}

.rotate {
    background: url(lib/landscape.png) no-repeat center;
    background-size: 100% 100%;
    border: 5px solid hsla(50,50%,50%,.9);
    transform: perspective(200px) rotateY(45deg);
}
.rotate img{
    border: 1px solid green;
    transform: rotateX(15deg) translateZ(10px);
    transform-origin: 0 0 40px;
}
/*改变transform-style的默认值*/
.three-d {
    transform-style: preserve-3d;
}

.spin:hover{
    -webkit-animation:spin 5s linear infinite;
}